import {React, useEffect, useState} from 'react'
import { Button, Layout } from 'antd'
import './MemberInfo.css'
import {
    SettingTwoTone
  } from '@ant-design/icons';
import {ApiService } from '../common/ApiService'
const { Header, Sider, Content } = Layout;

const headerStyle = {
    color: '#fff',
    height: 114,
    paddingInline: 61,
    lineHeight: '114px',
    backgroundColor: '#141E20',
  };
  const contentStyle = {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#141E20',
  };
  const siderStyle = {
    color: '#fff',
    backgroundColor: '#23363A',
  };
  const layoutStyle = {
    width: '100%',
    maxWidth: '100%',
  };
const MemberInfo = () =>{
    const [userData, setUserData] = useState({email: '', ref_code: '', username: ''});
    useEffect(() => {
        const fetchData = async () => {
            try {
                var response = await ApiService.getUser();
                if (response.code === 0) {
                    setUserData(response.data);
                    userData.email = response.data.email;
                    userData.username = response.data.username;
                    userData.ref_code = response.data.ref_code;
                    console.log(userData);
                }    
            } catch (err) {
                //setError(err.message);
            }
        }
        fetchData();
      }, []); 
    return (
        <>
        <Layout style={layoutStyle}>
                <Sider width="403px" style={siderStyle}>
                    <div className='menuList'>
                        <img src='../public/images/LOGO1.svg' width='238px' height='32px' onClick={() => {location.href= '/'}} />
                        <div className='checkMenu active'>
                            <img src='../../public/images/arrowhead21.svg' />
                            Dashboard
                        </div>
                        <div className='checkMenu' onClick={() => {location.href= '/ApiKey'}}>
                            <img src='../../public/images/API_N3.svg' />
                            Endpoint & API Key
                        </div>
                        <div className='checkMenu' onClick={() => {location.href= '/Setting'}}>
                            <img src='../../public/images/setting1.svg' />
                            Setting
                        </div>
                    </div>
                </Sider>
                <Layout>
                    <Header style={headerStyle}>
                        <div className='memberHeader'>
                            <div className='name'>Dashboard</div>
                            <div className='info'>
                                Balance: <span>$0.00</span> USDC
                                <img src='../../public/images/memberRobot.svg' />
                                <div className='robotName'>U</div>
                            </div>
                        </div>
                    </Header>
                    <Content style={contentStyle}>
                        <div className='memberMain'>
                            <div className='welcome'>
                                <div className='txt' style={{fontSize: 22, textAlign: 'left'}}>Welcome <a href='#'>{userData.username}</a><br />Dashboard Overview</div>
                                <div className='txt'>
                                    <img src='../../public/images/purse1.svg' />
                                    <br />
                                    <span>$0.00</span>
                                </div>
                                <img className='img-robot' src='../../public/images/mb1.svg' />
                            </div>
                            <div className='dsahborad'>
                                <div className='memberMoney'>
                                    <div className='item'>
                                        <div className='title'>
                                            Median Landing Time
                                        </div>
                                        <div className='chart'>
                                            <div className='icon'>
                                                <img src='../../public/images/dollar.svg' />
                                            </div>
                                            <div className='num'>
                                                9,483 Slots
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <div className='item'>
                                        <div className='title'>
                                            Transactions Sent
                                        </div>
                                        <div className='chart'>
                                            <div className='icon1'>
                                            <img src='../../public/images/Dollar1.svg' />
                                            </div>
                                            <div className='num'>
                                                10,448 Slots
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <div className='item'>
                                        <div className='title'>
                                            Billing Cycle
                                        </div>
                                        <div className='chart'>
                                            <div className='icon2'>
                                                <img src='../../public/images/date.svg' />
                                            </div>
                                            <div className='num'>
                                                - &gt; -
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                <div className='quick'>
                                    <div className='title'>Quick Access</div>
                                    <div className='cardList'>
                                        <div className='card1'>
                                            <div className='img'>
                                                <img src='../../public/images/key.svg' />
                                            </div>
                                            <div className='content'>
                                                <div className='txt'>
                                                    <div className='t1'>Create an API key</div>
                                                    <div className='t2'>Start integrating with our API</div>
                                                </div>
                                                <div className='img' style={{cursor: 'pointer'}} onClick={()=>{location.href='/ApiKey'}}>
                                                    <img src='../../public/images/cc-arrow-right.svg' />
                                                </div>
                                            </div>
                                        </div>
                                        <div className='card1'>
                                        <div className='img'>
                                                <img src='../../public/images/trace2.svg' />
                                            </div>
                                            <div className='content'>
                                                <div className='txt'>
                                                    <div className='t1'>Set up billing</div>
                                                    <div className='t2'>Unlock access to the API</div>
                                                </div>
                                                <div className='img'>
                                                    <img src='../../public/images/cc-arrow-right.svg' />
                                                </div>
                                            </div>
                                        </div>
                                        <div className='card1'>
                                        <div className='img'>
                                                <img src='../../public/images/trace3.svg' height="46px" />
                                            </div>
                                            <div className='content'>
                                                <div className='txt'>
                                                    <div className='t1'>Track your usage</div>
                                                    <div className='t2'>Deep dive into your usage</div>
                                                </div>
                                                <div className='img'>
                                                    <img src='../../public/images/cc-arrow-right.svg' />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className='myplan'>
                                    <div className='title'>My Subscription Plan</div>
                                    <div className='plan'>
                                        <div>
                                            <div className='txt'>Free Plan</div>
                                            <div className='txt1'>$0/ Monthly</div>
                                        </div>
                                        <div>
                                            <div className='txt'>Due on</div>
                                            <div className='txt1'>-</div>
                                        </div>
                                        <div>
                                            <div className='txt'>TPS Allowance</div>
                                            <div className='txt1'>1 TX per 10s</div>
                                        </div>
                                        <div>
                                            <Button style={{
                                                width: 188,
                                                height: 64,
                                                backgroundColor: '#141E20',
                                                borderRadius: 50,
                                                border: 'none',
                                                color: '#ffffff',
                                                fontSize: 24,
                                                fontWeight: 500,
                                                textDecoration: 'none'
                                            }} href='/ManagePlan'>Manage Plan</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Content>
                </Layout>
                </Layout>
        </>
    )
}
export default MemberInfo